<template>
    <div class="details-box">
        <div class="page-header" v-if="record">
            <div class="page-title">{{ record.title }}</div>
            <n-carousel draggable :slides-per-view="col" :loop="false" :show-dots="false"
                        class="page-meta">
                <div class="item side-card">
                    <svg-icon class="meta-svg" icon-class="calendar"/>
                    <div class="meta-title">发表时间</div>
                    <div class="meta-text">{{ formatDateTime(record.createTime) }}</div>
                </div>
                <div class="item side-card">
                    <svg-icon class="meta-svg" icon-class="calendar"/>
                    <div class="meta-title">更新时间</div>
                    <div class="meta-text">{{ formatDateTime(record.updateTime) }}</div>
                </div>
                <div class="item side-card">
                    <svg-icon class="meta-svg" icon-class="eye"/>
                    <div class="meta-title">浏览量</div>
                    <div class="meta-text">{{ record.viewCount }}</div>
                </div>
                <div class="item side-card">
                    <svg-icon class="meta-svg" icon-class="like"/>
                    <div class="meta-title">点赞量</div>
                    <div class="meta-text">{{ record.likeNumber }}</div>
                </div>
                <div class="item side-card">
                    <svg-icon class="meta-svg" icon-class="collect"/>
                    <div class="meta-title">收藏量</div>
                    <div class="meta-text">{{ record.collectNumber }}</div>
                </div>
                <div class="item side-card">
                    <svg-icon class="meta-svg" icon-class="edit"/>
                    <div class="meta-title">字数</div>
                    <div class="meta-text">{{ count(wordNum) }}</div>
                </div>
            </n-carousel>
            <img class="page-cover" :src="record.cover" alt="not img">
            <Waves></Waves>
        </div>
        <div v-if="record" class="main-container">
            <div class="left-container" :class="{sub: app.userFlag}">
                <div class="side-card" style="padding: 0;overflow: hidden">
                    <MdPreview class="md-preview" editorId="preview-only" :modelValue="record.content"
                               :theme="app.isDark ? 'dark' : 'light'" previewTheme="mk-cute" codeTheme="github"/>
                    <!-- default、github、vuepress、mk-cute、smart-blue、cyanosis-->
                    <!-- atom、a11y、github、gradient、kimbie、paraiso、qtcreator、stackoverflow-->
                </div>
                <div class="post-nav">
                    <div class="post-item side-card" v-if="record.lastRecord">
                        <router-link :to="`/record/${record.lastRecord?.id}`" class="post-cover"
                                     :style="cover(record.lastRecord.cover)">
                            <div class="post-text last">上一篇</div>
                            <div class="post-title">{{ record.lastRecord.title }}</div>
                        </router-link>
                    </div>
                    <div class="post-item side-card" v-if="record.nextRecord">
                        <router-link :to="`/record/${record.nextRecord?.id}`" class="post-cover"
                                     :style="cover(record.nextRecord.cover)">
                            <div class="post-text next">下一篇</div>
                            <div class="post-title">{{ record.nextRecord.title }}</div>
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="right-container" :class="{sub: app.userFlag, sub2: isCatalog}">
                <svg-icon class="cate-icon but" icon-class="category" @click="isCatalog = !isCatalog"/>
                <div v-show="isCatalog" class="side-card"
                     style="background: var(--main-2-ha3);color: var(--text-color)">
                    <MdCatalog editorId="preview-only" :scrollElement="scrollElement"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {formatDateTime} from "@/utils/date";
import useStore from "@/store";
import {MdCatalog, MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import {useWindowSize} from "@vueuse/core";
import {RecordInfo, RecordPagination} from "@/api/record/types";
import {TagVO} from "@/api/tag/types";
import {getRecordHomeById} from "@/api/record";

const route = useRoute();
const scrollElement = document.documentElement;
const {app, web, user} = useStore();
const {width, height} = useWindowSize();

const record = ref({
    id: 0,
    cover: "",
    userId: 0,
    title: "",
    content: "",
    images: "",
    imgList: [] as string[],
    video: "",
    type: 1,
    likeNumber: 0,
    collectNumber: 0,
    viewCount: 0,
    tagVOList: [] as TagVO[],
    lastRecord: {} as RecordPagination,
    nextRecord: {} as RecordPagination,
    createTime: "",
    updateTime: "",
} as RecordInfo);

const data = reactive({
    isLoading: false,
    wordNum: 0,
    col: 3,
    isCatalog: false
});
const {isLoading, wordNum, col, isCatalog} = toRefs(data);

watchEffect(() => {
    if (width.value > 800 && width.value < 1200) {
        col.value = 3;
    } else if (width.value < 800) {
        col.value = 2;
    } else {
        col.value = 4;
    }
});
const cover = computed(() => (cover: string) => 'background-image:url(' + cover + ')');
const count = (value: number) => {
    if (value >= 1000) {
        return (value / 1000).toFixed(1) + "k";
    }
    return value;
};
const deleteHTMLTag = (content: string) => {
    return content
        .replace(/<\/?[^>]*>/g, "")
        .replace(/[|]*\n/, "")
        .replace(/&npsp;/gi, "");
};

onMounted(() => {
    getRecordHomeById(Number(route.params.id)).then(({data}) => {
        if (data.flag) {
            record.value = data.data;
            wordNum.value = deleteHTMLTag(record.value.content).length;
            isLoading.value = true;
        }
    })
})
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";

.details-box {
  width: 100%;

  .post-nav {
    margin: 0.2rem auto;
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 0.2rem;

    .post-item {
      position: relative;
      width: 48%;
      height: 2rem;
      padding: 0;
      border-radius: 0.2rem;
      overflow: hidden;

      .post-cover {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        color: var(--text-color);
        background-position: center;
        background-size: cover;
        animation: blur 0.8s ease-in-out forwards;

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #434343, #000);
          opacity: 0.3;
          transition: all 0.2s ease-in-out 0s;
          z-index: -1;
          top: 0;
          left: 0;
        }

        &:hover::before {
          opacity: 0;
        }

        .post-title {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.4rem;
          width: 100%;
          height: 100%;
        }

        .post-text {
          position: absolute;
          font-size: 0.3rem;
          background: var(--main-1);
          color: var(--text-color);
          padding: 0 0.2rem;
          width: 1.4rem;
        }

        .last {
          top: 0;
          left: 0;
          border-radius: 0 0 0.2rem 0;
        }

        .next {
          bottom: 0;
          right: 0;
          border-radius: 0.2rem 0 0 0;
        }
      }
    }
  }
}
</style>